<template >
  <div class="my-container">
    <div class="time-container">
      <text class="time">下午好，</text>
      <text class="detail">生命的闪烁不坚持到底怎能看见！</text>
    </div>
    <div class="user-container">
      <image class="userIcon" :src="userIcon"></image>
      <text class="userName">{{userName}} {{userCode}}</text>
    </div>

    <list class="list">
      <cell class="cell" v-for="(item,i) in cellList" :index='i' @click="clickcell(i,$event)">
        <div class="panel">
          <image class="icon" :src='item.src'></image>
          <text class="title">{{item.title}}</text>
        </div>
      </cell>
    </list>


  </div>
</template>

<script>
  const utils = require('../lib/utils');
  const navigator = weex.requireModule('navigator');
  var modal = weex.requireModule('modal')
  export default {

    data() {
      return {
        backLogo:'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png',
        userIcon:'https://gw.alicdn.com/tfs/TB1ARoKSXXXXXc9XVXXXXXXXXXX-72-72.png',
        userName:'王洋玲',
        userCode:'WW00028',
        cellList:[
          {src:'https://gw.alicdn.com/tfs/TB1ARoKSXXXXXc9XVXXXXXXXXXX-72-72.png',title:'个人资料'},
          {src:'https://gw.alicdn.com/tfs/TB1ARoKSXXXXXc9XVXXXXXXXXXX-72-72.png',title:'中奖记录'},
          {src:'https://gw.alicdn.com/tfs/TB1ARoKSXXXXXc9XVXXXXXXXXXX-72-72.png',title:'设备绑定'},
          {src:'https://gw.alicdn.com/tfs/TB1ARoKSXXXXXc9XVXXXXXXXXXX-72-72.png',title:'关于我们'},
          {src:'https://gw.alicdn.com/tfs/TB1ARoKSXXXXXc9XVXXXXXXXXXX-72-72.png',title:'系统设置'},
          {src:'https://gw.alicdn.com/tfs/TB1ARoKSXXXXXc9XVXXXXXXXXXX-72-72.png',title:'分享'},
        ]
      }
    },

    methods: {
      clickcell(index,e){
        console.log(index)
        console.log(e)

        if (index == 0) {
          //个人资料
        } else if (index == 1) {
          //! 中奖记录
        } else if (index == 2) {
          //! 设备绑定
        } else if (index == 3) {
          //! 关于我们
        } else if (index == 4) {
          //! 系统设置
          const url = weex.config.bundleUrl;
          var newUrl = utils.setBundleUrl(url, 'MyCenter/mySet.js');

          navigator.push({
              url: newUrl+'',
              animated: "true"
          }, event => {
              modal.toast({ message: 'callback: ' + newUrl,duraction:1000})
          })

        } else if (index == 5) {
          //! 分享
        }



      }
    }

  }
</script>

<style scoped>
  .my-container {
    margin-top: 0px;
    width: 750px;

  }

  .time-container {
    color: black;
    justify-content: center;
    margin-top: 0px;
    padding-left: 50px;
    padding-top: 20px;
    width: 750px;
    height: 300px;
    background-color: red;
  }

  .time {
    font-size: 50px;
    color: white;
  }

  .detail {
    color: white;
  }


  .user-container {
    width: 750px;
    height: 250px;
    padding-left: 50px;
    display: flex;
    flex-direction: row;
    background-color: blue;
    /* justify-content: center; */
  }

  .userIcon {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    border-width: 5px;
    border-color: white;

  }

  .userName {
    height: 100px;
    margin-top: 30px;
    padding-left: 40px;
  }

  .list {
    width: 750px;
    background-color: red;
  }

  .cell {
    height: 100px;

  }

  .panel {
    display: flex;
    flex-direction: row;
    padding-left: 50px;
  }

  .icon {
    width: 30px;
    height: 30px;
  }

  .title {
    margin-left: 20px;
  }




</style>
